<!-- 搜索框 -->
<template>
  <view class="list-all">
    <view class="search-main">
      <view class="search-content">
        <!-- 输入框 -->
        <uv-search v-if="mode === 'input'" v-model="searchContent" :placeholder="placeholder" @change="search" @clear="clear"
                   :showAction="showAction" :actionText="actionText" @custom="search" :disabled="disabled" :bgColor="bgColor"/>
        <!-- 列表选择器 -->
        <view v-if="mode === 'select'" @click="openPicker">
          <uv-input v-model="searchContent" :placeholder="placeholder" :suffixIcon="disabled ? '' : 'arrow-down'" disabled
                    :customStyle="{backgroundColor: bgColor}" shape="circle" border="bottom" :suffixIconStyle="{color: suffixIconColor}"/>
        </view>
        <!-- 日期选择器 -->
        <uv-search v-if="mode === 'date'" v-model="searchContent" :placeholder="placeholder" @click="openDatePicker" searchIcon="calendar"
                   actionText="清空" @custom="clear" :bgColor="bgColor" disabled/>
        <!-- 日历选择器 -->
        <uv-search v-if="mode === 'calendars'" v-model="searchContent" :placeholder="placeholder" @click="openCalendars" searchIcon="calendar"
                   actionText="清空" @custom="clear" :bgColor="bgColor" disabled/>
      </view>
      <view v-if="showSift" class="search-icon" @click="openShift">
        <image v-if="iconFlag" src="@/static/image/index/icon2.png" mode="widthFix"/>
        <image v-else src="@/static/image/index/icon1.png" mode="widthFix"/>
      </view>
    </view>
    <uv-picker ref="picker" :columns="[selectColumns]" :keyName="keyName" :title="title" @confirm="search" :closeOnClickOverlay="false"/>
    <uv-datetime-picker ref="datetimePicker" v-model="datetimePickerValue" :mode="dateMode" @confirm="search"
                        :title="title" :formatter="datetimeFormatter" :closeOnClickOverlay="false"/>
    <uv-calendars ref="calendars" :mode="calendarsMode" :title="title" @confirm="search" :allowSameDay="true" />
    <!-- 筛选弹层 -->
    <uv-popup ref="shift" :closeable="true" :closeOnClickOverlay="false">
      <view class="popup-title">{{ popupTitle }}</view>
      <view class="popup-content">
        <view>
          <slot name="shift"></slot>
        </view>
        <view class="bottom-box" @click.stop>
          <button class="reset-button" style="width: 49%" @click.stop="shiftReset">重置</button>
          <button class="sure-button" @click.stop="shiftConfirm">确认</button>
        </view>
      </view>
    </uv-popup>
  </view>
</template>

<script setup>
  import {ref} from "vue";
  import {datetimeFormatter} from "@/utils/dateTimeFormate";

  const {proxy} = getCurrentInstance();
  let emits = defineEmits(['search','clear','shiftConfirm','shiftReset']);
  let props = defineProps({
    searchValue: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请输入关键字'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    showAction: {
      type: Boolean,
      default: false
    },
    actionText: {
      type: String,
      default: '搜索'
    },
    mode: {
      type: String,
      default: 'input' // input 输入框 | select 列表选择器 | date 日期选择器 | calendars 日历选择器
    },
    // 列表选择器
    selectColumns: {
      type: Array,
      default: () => {
        return [];
      }
    },
    keyName: {
      type: String,
      default: 'label'
    },
    // 日期选择器
    dateMode: {
      type: String,
      default: 'date' // datetime | date | time | year-month | year
    },
    // 日历选择器
    calendarsMode: {
      type: String,
      default: '' // 不填 | multiple | range
    },
    // 筛选
    showSift: {
      type: Boolean,
      default: false
    },
    popupTitle: {
      type: String,
      default: '筛选'
    },
    iconFlag: {
      type: Boolean,
      default: false
    },
    // 样式
    bgColor: {
      type: String,
      default: '#fff'
    },
    suffixIconColor: {
      type: String,
      default: '#909399'
    },
  });

  // 搜索内容
  let searchContent = ref("");
  // 弹窗标题
  let title = ref();
  // 弹窗ref-选择器
  let picker = ref();
  // 弹窗ref-日期选择器
  let datetimePicker = ref();
  // 弹窗value-日期选择器
  let datetimePickerValue = ref(new Date());
  // 弹窗ref-日历选择器
  let calendars = ref();
  // 弹窗ref-筛选
  let shift = ref();


  // 初始化
  let init = () => {
    if (props.placeholder) {
      if (props.placeholder.substring(0, 3) === '请选择' || props.placeholder.substring(0, 3) === '请输入') {
        title.value = props.placeholder.substring(3);
      } else {
        title.value = props.placeholder;
      }
    }
  };

  // 搜索框-搜索
  let search = (e) => {
    if (props.mode === 'input') {
      // 输入框

    } else if (props.mode === 'select') {
      // 列表选择器
      if (e.value[0].id || e.value[0][props.keyName] !== '全部') {
        searchContent.value = e.value[0][props.keyName];
      } else {
        searchContent.value = ''; // 清空作用
      }
    } else if (props.mode === 'date') {
      // 日期选择器
      searchContent.value = proxy.dayjs(e.value).format('YYYY-MM-DD');
    } else if (props.mode === 'calendars') {
      // 日历选择器
      if (props.calendarsMode === 'range') {
        searchContent.value = e.range.before + '~' + e.range.after;
      }
    }
    console.log('搜索框-搜索', e)
    emits('search', e);
  };

  // 搜索框-清空
  let clear = (e) => {
    // if (props.mode === 'select') {
    //   picker.value.setIndexs([0], true);
    // }
    searchContent.value = '';
    emits('clear', e);
  }

  // 打开弹窗-选择器
  let openPicker = (e) => {
    if (!props.disabled) {
      picker.value.open();
    }
  }

  // 打开弹窗-日期选择器
  let openDatePicker = (e) => {
    if (!props.disabled) {
      datetimePicker.value.open();
    }
  }

  // 打开弹窗-日历选择器
  let openCalendars = (e) => {
    if (!props.disabled) {
      calendars.value.open();
    }
  }

  // 关闭所有弹层
  let close = (e) => {
    picker.value.close();
    datetimePicker.value.close();
    calendars.value.close();
    shift.value.close();
  }

  // 筛选-打开弹窗
  let openShift = (e) => {
    shift.value.open('bottom');
  }

  // 筛选-重置
  let shiftReset = (e) => {
    datetimePickerValue.value = new Date();
    emits('shiftReset', e);
    close();
  }

  // 筛选-确认
  let shiftConfirm = (e) => {
    emits('shiftConfirm', e);
    shift.value.close();
  }

  watchEffect(() => {
    if (props.searchValue) {
      searchContent.value = props.searchValue;
    }
  })

  defineExpose({close, clear})

  onShow(() => {
    init();
  })
</script>

<style scoped lang="scss">
  @import '@/static/css/dailycheck/common.scss';
  .list-all {
    background: #f6f6f6;
    padding: 24rpx 24rpx 24rpx 24rpx;
  }

  .search-main {
    height: 64rpx;
    display: flex;
    justify-content: space-between;
  }

  .search-content {
    width: 100% !important;
    padding-right: 0;
    padding-left: 0;
  }

  .search-icon {
    width: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    image{
      width: 36rpx;
      height: 36rpx;
    }
  }
  .bottom-box {
    width: 100%;
    padding: 20rpx;
  }
  .popup-content {
    padding: 0 !important;
  }
  ::v-deep .uv-search__action {
    color: #BFBFBF;
    font-size: 28rpx;
  }
</style>